import React from 'react'
import CmtItem from "@/components/CmtItem2";
/*import bootcss from 'bootstrap/dist/css/bootstrap.css'*/
// 未模块化,并不会暴露属性了 .所以 无需接收
import 'bootstrap/dist/css/bootstrap.css'
// 直接使用即可
// 模块化的scss或者less , 需要使用{} 使用

{
    // 引入bootstrap配置文件
// 如果在引用某个包时,包被安装在node_modules目录中,则可以省略node_modules这一层目录
// 直接以包名开始引入自己的模块 或样式表
}

// 导入样式表
// 经过试验,导入的css样式, 在整个项目内生效 => 导致样式冲突
import cssobj from '@/css/cmtlist.scss'
console.log(cssobj)

export default class CmtList extends React.Component {
    constructor() {
        super();
        this.state= {
            CommentList: [
                {id: 1, user: '张1', content: '哈哈,1'},
                {id: 2, user: '张2', content: '哈哈,2'},
                {id: 3, user: '张3', content: '哈哈,3'},
                {id: 4, user: '张4', content: '哈哈,4'},
                {id: 5, user: '张5', content: '哈哈,5'},
            ]
        }
    }
    render() {
        return <div>
            {/* 注意: 在jsx中,如果想要使用行内样式, 格式为: style={{ color: 'red'}}  */}
            {/* <button className={[bootcss.btn,bootcss[btn-primary]].join(" ")}>按钮</button> */}
            <button className="btn btn-primary">按钮</button>
            <h1 className={cssobj.title}>这是评论列表组件</h1>
            {this.state.CommentList.map(item => <CmtItem {...item} key={item.id}></CmtItem>)}
        </div>

    }
}